<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>CSS Lists: Outside Bullet Effect On Line Boxes</title>
  <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
  <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/list/004.html"/>
  <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#list-style" />
  <style type="text/css">
   .li { list-style: url(support/1x1-white.png) disc outside; display: list-item; border: thick solid green; background: red; line-height: 1.0; }
   .control { border: thick solid red; height: 1em; }
   div { position: absolute; top: 0; left: 0; font-size: 3em; }
  </style>
 </head>
 <body>
  <!-- The bullet should, even though it is only a pixel high, cause a
  line box to be created, and the line box should not be smaller (or,
  for that matter, larger) than 1em due to the line-height
  declaration. The control box should therefore be the same size. The
  list item should, however, have no width, since the line box is
  otherwise empty. -->
  <div class="control"/> <div class="li"/>
 </body>
</html>
